<template>
	<div>
		<van-nav-bar title="创建新求助" />
		<div style="padding: 3vw;">
			<van-space direction="vertical" fill>
				<van-form label="新求助">
					<van-field v-model="postForm.title" label="求助标题" />
					<van-field v-model="postForm.context" rows="5" autosize label="求助描述" type="textarea"
						placeholder="详细描述你的需求" />
					<van-field name="uploader" label="求助图片">
						<template #input>
							<van-uploader v-model="imgs" :max-count="1" />
						</template>
					</van-field>
					<van-field v-model="priceNumber" type="number" label="劳动补贴" @update:model-value="priceChange" />
		
				</van-form>
				<div style="margin: 2rem;">
					<div style="text-align: center;">
						劳动补贴:
						<strong style="color: red;font-size: 2rem;margin: 0.4rem;">
							{{priceShow}} ￥
						</strong>
					</div>
				</div>
		
				<van-button @click="addNewGood" icon="back-top" type="success" round block>创建求助</van-button>
			</van-space>
		</div>
		<van-popup  v-model:show="prepayPageShow" position="right" :style="{ width: '100%', height: '100%' }" closeable
			close-icon="arrow-left" close-icon-position="top-left" lazy-render>
			<OfferOrderPrePayPage v-if="prepayPageShow" :data="prepayPageData" :orderOffer="orderOffer" :close="closeOfferPage"></OfferOrderPrePayPage>
		</van-popup>
	</div>
</template>

<script>
	import {
		showNotify
	} from 'vant';
	import url from '@/assets/url.json';
	import OfferOrderPrePayPage from './OfferOrderPrePayPage';
	
	export default {
		props: {
			close: Function
		},
		data() {
			return {
				orderOffer:{},
				postForm: {
					title: '',
					bounty: 0,
					context: ''
				},
				imgs: [],
				priceNumber: 0,
				priceShow: '',
				price: 0,
				prepayPageShow: false,
				prepayPageData: {
				},
			}
		},
		
		components:{
			OfferOrderPrePayPage
		},
	
		methods: {
			closeOfferPage(){
				this.prepayPageShow=false;
			},
			addNewGood() {
				let formData = new FormData();
				for (let key in this.imgs) {
					formData.append('images', this.imgs[key].file);
				}
				for (let key in this.postForm) {
					formData.append(key, this.postForm[key]);
				}
				// formData.append('id',this.$cookies.get('userId'));
				this.$axios({
					url: url.ip + '/api-offer' + '/offer/create',
					method: 'POST',
					data: formData,
					headers: {
						token: this.$cookies.get('token'),
						'Content-Type': 'multipart/form-data',
					}
				}).then((res) => {
					if (res.data.code !== 0) {
						console.log(res);
						showNotify({
							type: 'danger',
							message: res.data.message
						});
					} else {
						showNotify({
							type: 'success',
							message: '创建求助成功'
						});
						this.prepayPageData=res.data.data;
						this.$axios({
							url: url.ip + '/api-offer' + '/order/create?pid='+this.prepayPageData.id,
							method: 'GET',
							data: formData,
							headers: {
								token: this.$cookies.get('token'),
								'Content-Type': 'multipart/form-data',
							}
						}).then((resp)=>{
							if (resp.data.code !== 0) {
								showNotify({
									type: 'danger',
									message: resp.data.message
								});
							}else{
								this.prepayPageShow=true;
								this.orderOffer = resp.data.data
							}
						})
					}
				}).catch((err) => {
					console.log(err);
					showNotify({
						type: 'danger',
						message: "网络错误或用户未登录"
					});
				})
			},
			priceChange(str) {
				if (str === '') {
					this.price = 0;
					this.priceShow = '0';
					this.postForm.bounty = '0';
				} else {
					this.priceShow = Number.parseFloat(str).toFixed(2);
					this.postForm.bounty = (this.priceShow + '').replace('.', '');
				}
			}
		}
	}
</script>

<style>
</style>